<template>
  <article>
    <header>
      <el-card class="query">
        <div slot="header">
          <span>查询条件</span>
          <div style="float: right">
            <el-button type="primary" icon="el-icon-search">查 询</el-button>
            <el-button
              type="success"
              @click="$router.push({ name: 'adminArticleEdit' })"
              icon="el-icon-plus"
              >新增文章</el-button
            >
          </div>
        </div>
        <el-form inline :model="query">
          <el-form-item label="标题">
            <el-input
              placeholder="请输入文章标题"
              v-model="query.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="query.state" placeholder="请选择发布状态">
              <el-option
                v-for="item in publishState"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </header>
    <main>
      <el-card>
        <el-table :data="tableData">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="cover" label="封面"></el-table-column>
          <el-table-column prop="outline" label="描述"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="{ row }">
              <tag success="publish" danger="not_publish" :value="row.state">
                {{
                  $array.searchByFiled(publishState, "code", row.state)["name"]
                }}
              </tag>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间">
            <span slot-scope="{ row }">{{
              $date.format(row.create_time)
            }}</span>
          </el-table-column>
          <el-table-column prop="update_time" label="更新时间">
            <span slot-scope="{ row }">{{
              $date.format(row.update_time)
            }}</span>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" @click="editArticle(row.id)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page.sync="query.currentPage"
          :page-size="query.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </main>
  </article>
</template>

<script>
import Tag from "@/components/Tag";
export default {
  name: "articleList",
  data() {
    return {
      query: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      publishState: []
    };
  },
  components: {
    Tag
  }
};
</script>

<style scoped></style>
